<template>
	<view class="uni-tab-bar">
		<scroll-view class="uni-swiper-tab" scroll-x="true">
			<view class="uni-swiper-tab-view" :style="{ width: listWidth + 'px' }">
				<block class="blockClass" v-for="(tab, index) in tabBars" :key="tab.id">
					<view class="swiper-tab-list" :class="{ active: tabIndex == index }" @tap="tabtap(index)" :style="{ width: tabWidth + 'px'}">
						{{ tab.busName ? tab.busName : tab.name }} {{ tab.num ? tab.num : '' }}
						<view class="swiper-tab-line" :class="{ active1: tabIndex == index }"/>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabWidth: 0, //每个选项的宽度
			listWidth: 0,
		};
	},

	created() {
		console.log('this.tabBars: ', JSON.parse(JSON.stringify(this.tabBars)));
		console.log('this.tabBars.length: ', JSON.parse(JSON.stringify(this.tabBars.length)));
		var tempArray = [];
		for (let i = 0; i < this.tabBars.length; i++) {
			if (this.tabBars[i].busName != undefined) {
				console.log('busName:', this.tabBars[i].busName);
				tempArray.push(this.tabBars[i].busName);
			} else {
				console.log('name:', this.tabBars[i].name);
				tempArray.push(this.tabBars[i].name);
			}
		}

		// console.log("tempArray: ", tempArray);
		// this.tabWidthArray = tempArray;  //放开会报错
		// console.log("this.tabWidthArray: ", this.tabWidthArray);

		// this.$forceUpdate()
		this.listWidth = this.$publicScreenW;
		this.tabWidth = this.$publicScreenW / this.tabBars.length;
		this.listWidth = this.$publicScreenW;

		console.log('this.tabBars.length: ', this.tabBars.length);
		console.log('this.tabWidth: ', this.tabWidth);

	},

	mounted() {
	},
	props: {
		// tabWidth: 0, //每个选项的宽度
		// listWidth: 0,
		tabBars: Array,
		tabIndex: Number,
		scrollStyle: {
			type: String,
			default: ''
		},
		scrollItemStyle: {
			type: String,
			default: ''
		},
		tabWidthArray: [], //字体宽度
	},

	methods: {
		//点击切换导航
		tabtap(index) {
			// this.tabIndex = index;
			this.$emit('tabtap', index);
		}
	}
};
</script>

<style scoped lang="less">
.uni-tab-bar {
	display: flex;
	width: 100%;
	background-color: #FFFFFF;
	// background-color: #FF0000
}

.uni-swiper-tab {
	display: flex;
	height: 100%;
}

.uni-swiper-tab-view {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.blockClass {
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
}

.swiper-tab-list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #2B2B2B;
	font-size: 28upx;
	text-align: center;
	margin-left: 1%;
	margin-right: 1%;
	height: 90upx;
	/*margin: 20upx;*/
	// ;
}
.active {
	font-weight: bold;
	font-size: 14px;
	color: #0294FF;
}

.swiper-tab-line {
	border-style: solid;
	border-width: 0upx;
	border-color: #ff9500;
	width: 50upx;
	height: 4upx;
	position: absolute;
	bottom: 0;
	border-radius: 2upx;
	margin-bottom: 0px;
}
.active1 {
	border-style: solid;
	border-width: 0upx;
	border-color: #0294FF;
	background-color: #0294FF;
}
</style>
